<!--分类比例柱状图-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'
  import CategoryRatioBarChart from './CategoryRatioBarChart'

  const _this = {
    name: 'CategoryRatioBarChart', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '1.2',
      configDataTemp: Object.assign({

        // 组件相关配置属性，Echarts图表组件的相关配置属性，必须在chartOption对象下定义
        chartOption: {
          title: PnDesigner.buildTitleConfigData(),
          legend: PnDesigner.buildLegendConfigData({
            position: 'bottom-left',
            icon: 'circle',
            bottom: '0%',
            left: '10%',
            itemWidth: 7,
            itemHeight: 7,
            itemGap: 20
          }),
          series: [
            CategoryRatioBarChart.buildSeriesObj('#2196f3'),
            CategoryRatioBarChart.buildSeriesObj('#f06292'),
            CategoryRatioBarChart.buildSeriesObj('#ff9800')
          ]
        }

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'name',
            remark: '类目'
          },
          {
            field: 'value',
            remark: '值'
          }
        ],
        ds_resultObj: [
          {
            'name': '油车',
            'value': 60
          },
          {
            'name': '危化品',
            'value': 30
          },
          {
            'name': '其他',
            'value': 10
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration([
        PnDesigner.buildFuncCompInteractionStreamItem('itemClick', [
          PnDesigner.buildFuncCompInteractionFieldsMapItem('name', '', '类目'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('value', '', '值')
        ])
      ]))
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.launchInteractionStream)
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.launchInteractionStream)
        });
      },

      launchInteractionStream (params) {
        this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'itemClick', params.data)
      }
    },
    computed: {
      chartOption () {

        let option = {
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          tooltip: {
            show: false
          },
          legend: Object.assign(PnDesigner.buildLegendChartOption(this.component.compConfigData.chartOption.legend), {
            bottom: this.component.compConfigData.chartOption.legend.bottom,
            left: this.component.compConfigData.chartOption.legend.left,
            data: []
          }),
          xAxis: [
            {
              type: 'value',
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              splitLine: {
                show: false,
              }
            }
          ],
          yAxis: [
            {
              data: [''],
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              splitLine: {
                show: false,
              }
            }
          ],
          series: []
        };

        this.runCustomFilter(this.component.compConfigData.ds_resultObj).forEach((resultObjItem, index) => {
          if (resultObjItem) {
            let item = this.component.compConfigData.chartOption.series[index];
            if (item) {
              option.series.push({
                name: resultObjItem.name,
                type: 'bar',
                barWidth: item.barWidth,
                stack: item.stack,
                label: {
                  borderWidth: 10,
                  distance: 20,
                  align: 'center',
                  verticalAlign: 'middle',
                  borderRadius: 1,
                  borderColor: item.itemStyle.color,
                  backgroundColor: item.itemStyle.color,
                  show: true,
                  position: 'top',
                  formatter: item.label.formatter.indexOf('(params') < 0 ? '{c}' : eval(item.label.formatter),
                  color: item.label.color,
                  fontSize: item.label.fontSize
                },
                itemStyle: {
                  color: item.itemStyle.color
                },
                data: [
                  {
                    value: resultObjItem.value
                  }
                ]
              })
              option.legend.data.push(resultObjItem.name)
            }else {
              option.series.push(CategoryRatioBarChart.buildDefaultSeriesObj(resultObjItem.name, this.currentEchartThemeColors[index], resultObjItem.value));
              option.legend.data.push(resultObjItem.name)
            }
          }
        })

        // 下面这一段代码用于合并组件的扩展配置，如果组件不需要扩展配置，可以删掉
        option = this.$PnDesigner.mergeChartCustomOption(option, this.component.compConfigData.customOption);

        return option;
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
